<!--
 * @Author: wangzhichiao<https://github.com/wzc570738205>
 * @Date: 2021-06-30 20:13:38
 * @LastEditors: wangzhichiao<https://github.com/wzc570738205>
 * @LastEditTime: 2021-07-01 17:47:50
-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta
			name="viewport"
			content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
		/>
		<title>three.js 旋转球体</title>
		<link type="text/css" rel="stylesheet" href="./css/main.css" />
		<script src="js/three.min.js"></script>
		<script src="js/OrbitControls.js"></script>
	</head>

	<body></body>
	<script>
		let camera, scene, renderer;

		const textureLoader = new THREE.TextureLoader();

		let earth;
		init();
		animate();

		function init() {
			// scene
			scene = new THREE.Scene();
			// camera
			camera = new THREE.PerspectiveCamera(
				10,
				window.innerWidth / window.innerHeight,
				0.1,
				200
			);
			camera.position.set(30, 5, 20);

			//加载背景纹理
			var texture = new THREE.ImageUtils.loadTexture("./img/eQ9y7xBeY4.jpg");
			//	var texture = textureLoader.load("./img/eQ9y7xBeY4.jpg");

			scene.background = texture;
			// 灯光
			// let directionalLight = new THREE.DirectionalLight(0xffffff, 2);
			// directionalLight.position.set(10, 10, 10);
			// scene.add(directionalLight);
			//球缓冲几何体
			const earthGeometry = new THREE.SphereGeometry(2, 16, 16);
			//MeshPhysicalMaterial  阴影球体
			const earthMaterial = new THREE.MeshBasicMaterial({
				specular: 0x333333,
				shininess: 5,
				map: textureLoader.load("./img/earth_atmos_2048.jpg"),
				specularMap: textureLoader.load("./img/earth_specular_2048.jpg"),
				normalMap: textureLoader.load("./img/earth_normal_2048.jpg"),
				normalScale: new THREE.Vector2(0.85, 0.85),
			});
			earth = new THREE.Mesh(earthGeometry, earthMaterial);
			scene.add(earth);
			//renderer
			renderer = new THREE.WebGLRenderer();
			renderer.setPixelRatio(window.devicePixelRatio);
			renderer.setSize(window.innerWidth, window.innerHeight);
			document.body.appendChild(renderer.domElement);
			// controls
			const controls = new THREE.OrbitControls(camera, renderer.domElement);
			controls.minDistance = 5;
			controls.maxDistance = 100;
			controls.enablePan = false;
			//

			window.addEventListener("resize", onWindowResize);
		}

		function onWindowResize() {
			camera.aspect = window.innerWidth / window.innerHeight;

			camera.updateProjectionMatrix();

			renderer.setSize(window.innerWidth, window.innerHeight);
		}

		function animate() {
			requestAnimationFrame(animate);

			earth.rotation.x += 0.001;
			earth.rotation.y += 0.001;

			renderer.render(scene, camera);
		}
	</script>
</html>
